<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="css/elementUI.css">
    <!-- 引入组件库 -->
    <script src="js/elementUI.js"></script>
</head>
<body>
    <div id="app">

        <el-row :gutter="10">
            <el-col :span="8">
                <el-card style="height: 500px;background-color: red;">

                </el-card>
            </el-col>
            <el-col :span="8">
                <el-card style="height: 500px;background-color: red;"></el-card>
            </el-col>
            <el-col :span="8">
                <el-card style="height: 500px;background-color: red;"></el-card>
            </el-col>
        </el-row>

        <el-row>
            <el-col :span="18" offset="3">
                <el-card style="height: 200px;background-color: green;" ></el-card>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="3" style="background-color: transparent;height: 200px;"></el-col>
            <el-col :span="18" >
                <el-card style="height: 200px;background-color: green;" ></el-card>
            </el-col>
            <el-col :span="3"></el-col>
        </el-row>
    </div>
    <script>
        new Vue({
            el:"#app",
            data() {
                return {
                    key: value
                }
            },
        })
    </script>
</body>
</html>
